<template>
  <div>
    <!-- 查询表单 -->
    <el-form inline class="demo-form-inline" v-model="searchForm">

      <el-form-item>
        <el-select placeholder="采集类型" v-model="searchForm.gather">
          <el-option label="新生数据采集"></el-option>
          <el-option label="学籍数据采集"></el-option>
          <el-option label="毕业生数据采集"></el-option>
          <el-option label="教师培训信息采集"></el-option>

        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select placeholder="所属类别" v-model="searchForm.model">
          <el-option label="三年制中专"></el-option>
          <el-option label="两年制大中专"></el-option>
          <el-option label="3+2大专"></el-option>
          <el-option label="五年制大专"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select placeholder="状态" v-model="searchForm.state">
          <el-option label="开启"></el-option>
          <el-option label="关闭"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item size="normal">
        <el-input placeholder="采集名称"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary">查询</el-button>
      </el-form-item>
    </el-form>
    <el-divider></el-divider>

    <el-button type="info" size="default" @click="">新增</el-button>
    <el-button type="danger" size="default" @click="">清空数据</el-button>


    <!-- 表格 -->

    <el-table border ref="multipleTable" :data="list" tooltip-effect="dark" style="width: 100%">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column label="序号" width="120" type="index" :index="1">
        <!-- <template slot-scope="scope">{{ scope.row.date }}</template> -->
      </el-table-column>
      <el-table-column prop="gatherName" label="采集名称" width="150">
      </el-table-column>
      <el-table-column prop="gatherType" label="采集类型" width="150">
        <template slot-scope="scope">

          <el-tag v-if="scope.row.gatherType === '1'">新生数据采集</el-tag>
          <el-tag type="success" v-else-if="scope.row.gatherType === '2'">学籍数据类型</el-tag>
          <el-tag type="warning" v-else>毕业生数据类型</el-tag>

        </template>
      </el-table-column>
      <el-table-column prop="name" label="所属类别" width="120">

      </el-table-column>
      <el-table-column prop="url" label="url" width="120">
        <template slot-scope="scope">
          <el-button type="info" size="middle" @click="handleCopy(scope.row.url)">复制</el-button>
        </template>

      </el-table-column>
      <el-table-column label="状态" width="120">
        <template slot-scope="scope">

          <el-switch v-model="scope.row.status" active-color="#13ce66" inactive-color="#ff4949" active-value="0"
            inactive-value="1">
          </el-switch>

        </template>

      </el-table-column>
      <el-table-column label="操作" width="180">
        <el-button type="primary" size="middle">修改</el-button>
        <el-button type="danger" size="middle">删除</el-button>


      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="queryInfo.pagenum" :page-sizes="[1, 2, 5, 10]" :page-size="queryInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>

  </div>
</template>

<script>
  import {data,newdata} from '../data/index'

  // import {data} from '../data/data'
  // console.log(data);
  export default {
    data() {
      return {
        searchForm: {
          gather: '',
          model: '',
          state: ''
        },
        list: data.data.list,
        total: data.data.total,
         // 获取用户列表的参数对象
        queryInfo: {
          query: '',
          // 当前的页数
          pagenum: 1,
          // 当前每页显示的条数
          pagesize: 2,
        },
      }
    },
    methods: {
      handleCopy(url) {

        let oInput = document.createElement('input')

        oInput.value = url
        document.body.appendChild(oInput);
        oInput.select();
        document.execCommand("Copy");

        oInput.className = 'oInput';
        // oInput.style.display = 'none';
        this.$message({
          message: '复制成功',
          type: 'success'
        })
        oInput.parentNode.removeChild(oInput);


      },
      handleCurrentChange(newPage) {
        this.queryInfo.pagenum = newPage
        this.list = newdata
        
      },

    }

  }

</script>
<style lang='scss' scoped>
  .el-table {
    margin-top: 20px;
  }
</style>